<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>即时通讯</title>
</head>

<body>

  <h1>这里是即时通讯测试案例，<br />可以用不同浏览器打开：http://localhost:3000/frontend/socket 进行聊天</h1>
  <br />
  <a href="/">返回首页</a>
  <br />
  <br />
  <br />
  姓名：<input type="text" id="name" name="name" />
  <br />
  <br /> 内容：
  <input type="text" id="msg" name="msg" />
  <br />
  <br />
  <input type="button" value="发送" id="send" />
  <br />
  <br />
  <h3>聊天记录</h3>
  <div id="list">

  </div>
  <!-- 引入客户端脚本 -->
  <script src="/vendors/socket.io/socket.io.js"></script>
  <script>
    // 连接服务器
    var socket = io.connect('http://localhost:3000/');

    window.onload=function(){
        var send=document.getElementById("send");
        send.onclick=function(){
          var name=document.getElementById("name").value;
          var msg=document.getElementById("msg").value;

          // 发送消息
          socket.emit('send', { data:name+":"+msg  });
        };


        // 监听服务器消息
        socket.on('receive', function (data) {
          console.log(data);
          var list = document.getElementById("list");
          // 写入聊天列表
          list.innerHTML=list.innerHTML+"<br />"+data.data;
          // 清空msg
          document.getElementById("msg").value="";
        });
    };
</script>
</body>

</html>